import React, { useState, useMemo, useRef } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { CalendarProvider, ExpandableCalendar } from 'react-native-calendars';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { themeColor, } from '../mocks/theme';
import { agendaItems, getMarkedDates } from '../mocks/agendaItems';
import { CalendarNavigationTypes } from 'react-native-calendars/src/expandableCalendar/commons';


export function CalendarProviderExample6() {
  const ITEMS: any[] = agendaItems;
  const INITIAL_DATE = '2022-07-07';
 const [selectedDate, setSelectedDate] = useState(INITIAL_DATE);
  const todayBtnTheme = useRef({
    todayButtonTextColor: themeColor
  });
  const CalendarNavigationTypesList: CalendarNavigationTypes[] = [CalendarNavigationTypes.AGENDA_SCROLL, CalendarNavigationTypes.MONTH_ARROWS, CalendarNavigationTypes.MONTH_SCROLL, CalendarNavigationTypes.TODAY_PRESS, CalendarNavigationTypes.WEEK_ARROWS, CalendarNavigationTypes.WEEK_SCROLL]

  const marked = useMemo(() => {
    return selectedDate
      ? {
        [selectedDate]: {
          selected: true,
          disableTouchEvent: true,
          selectedColor: '#5E60CE',
          selectedTextColor: 'white',
        },
      }
      : {};
  }, [selectedDate]);

  return (
    <ScrollView style={styles.calendar}>

      <Tester>
        <TestSuite name="disableAutoDaySelection">
          <TestCase itShould="测试 CalendarProvider 的 disableAutoDaySelection 阻止自动选择日期">
            <CalendarProvider
              date={ITEMS[1]?.title}
              disableAutoDaySelection={CalendarNavigationTypesList}
              // disabledOpacity={0.5}
              theme={todayBtnTheme.current}
            >
              <ExpandableCalendar markedDates={marked} />
            </CalendarProvider>

          </TestCase>
        </TestSuite>
      </Tester>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderWidth: 1,
    borderColor: '#b6c1cd',
  },
});